<template>
  <div class="container">
    <h3>发表评论</h3>
    <hr>
    <textarea  placeholder="请输入要评论的内容(最多评论120字)" maxlength="120" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="sendComment">发表评论</mt-button>

    <div class="cmt-list">
       <div class="cmt-item" v-for="(item,i) in comment" :key=item.add_time>
           <div class="cmt-title">
             第{{i+1}}楼&nbsp;&nbsp;用户：{{item.usernam}}&nbsp;&nbsp;发表时间：{{item.add_time|dataFormat}}
           </div>

            <div class="cmt-body">
             {{item.content===''?'此用户很懒 什么也没说 只是走个场':item.content}}
              </div>
         </div>
       </div>

    <mt-button type="danger" size="large" plain @click="getMore">记载更多</mt-button>
  </div>
</template>

<script>
  import {Toast } from "mint-ui";
  export default{
    data(){
      return {
            msg:'',
            comment:[
              {
                usernam:"匿名用户",
                add_time:"2019-05-04T20:08:30.000Z",
                content:'这个漫画真的很好看'
              },
              {
                usernam:"浮梦一生",
                add_time:"2019-08-22T10:22:33.000Z",
                content:'良心作者 写了那么好看的漫画'
              },
              {
                usernam:"上善若水",
                add_time:"2020-06-08T16:38:20.000Z",
                content:'简直绝了'
              },
              {
                usernam:"fox",
                add_time:"2019-11-13T10:58:30.000Z",
                content:'强烈推荐这款漫画'
              },
              {
                usernam:"sindy",
                add_time:"2025-08-09T09:18:30.000Z",
                content:''
              },
              {
                usernam:"E的真的快",
                add_time:"2020-04-23T21:03:30.000Z",
                content:'纯路人，漫画真心不错'
              },
              {
                usernam:"我的压缩我做主",
                add_time:"2020-03-27T03:07:30.000Z",
                content:''
              },
              {
                usernam:"污渍 ,永远滴神",
                add_time:"2021-05-24T06:38:32.000Z",
                content:'同学推荐过来的 爱了爱了'
              },

            ],
            commentmore:[
              {
                usernam:"f",
                add_time:"2018-12-12T20:58:30.000Z",
                content:'强烈推荐这款漫画'
              },
              {
                usernam:"sind",
                add_time:"2021-08-09T09:18:30.000Z",
                content:''
              },
              {
                usernam:"快的一批",
                add_time:"2020-08-23T21:03:30.000Z",
                content:'纯路人，漫画真心不错'
              },
              {
                usernam:"我的压缩",
                add_time:"2020-08-27T03:07:30.000Z",
                content:''
              },
              {
                usernam:"永远滴神",
                add_time:"2021-03-24T06:38:32.000Z",
                content:'同学推荐过来的 爱了爱了'
              }
            ]

      }
    },
    props:["id"],
    methods:{
      getMore(){
        this.comment=this.comment.concat(this.commentmore)
      },
      sendComment(){
        if(this.msg.trim().length===0){
              return Toast("评论的内容不能为空")
        }else{
          var cmt={
            usernam:"匿名用户",
            add_time:Date.now(),
            content:this.msg.trim()
          }
          this.comment.unshift(cmt)
          this.msg=''

        }

      }
    }

  }
</script>

<style scoped>
  h3{
    text-align: center;
  }
.container{
    font-size:18px;
  }
  textarea{
    font-size:14px;
    height:85px;
    margin:0;
  }
  .cmt-list{
    margin:5px 0;
  }
  .cmt-list,.cmt-item{
    font-size:13px;
    }
   .cmt-title{
     line-height:30px;
    background-color: #ccc;
   }
   .cmt-list,.cmt-body{
     line-height:35px;
     text-indent:2em;
   }
</style>
